import { defineComponent } from 'vue'
import { usePrefix } from '../hooks'
import { IconWidget } from '../widgets'
import { makeStringProp } from '@/shared'
import cls from 'classnames'
import './styles.less'

type ButtonIconPosition = 'left' | 'right'
const buttonProps = {
  icon: String,
  iconPosition: makeStringProp<ButtonIconPosition>('left'),
}

export const Button = defineComponent({
  props: buttonProps,
  setup(props, { slots }) {
    const prefix = usePrefix('button-panel')

    const renderIcon = () => {
      if (props.icon) {
        return (
          <span
            class={cls(prefix + '-icon', {
              [`${prefix}-icon-right`]: props.iconPosition === 'right',
            })}
          >
            <IconWidget infer={props.icon} size={16}></IconWidget>
          </span>
        )
      }
    }
    return () => (
      <div class={cls(prefix)}>
        {props.iconPosition === 'left' && renderIcon()}
        {slots.default?.()}
        {props.iconPosition === 'right' && renderIcon()}
      </div>
    )
  },
})
